<!doctype html>
<html>
<head>
<title>选择游客</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0, user-scalable=no, width=device-width">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" href="assets/css/amazeui.min.css">
<link rel="stylesheet" href="assets/css/style.css">
<script src="assets/js/jquery-1.9.0.min.js"></script>
<style>
.am-ucheck-checkbox:checked + .am-ucheck-icons, .am-ucheck-radio:checked + .am-ucheck-icons {
    color: #69bae0;
}
.am-ucheck-checkbox:hover:not(.am-nohover):not(:disabled) + .am-ucheck-icons, .am-ucheck-radio:hover:not(.am-nohover):not(:disabled) + .am-ucheck-icons {
    color: #69bae0;
}
#tourist_list{padding-bottom: 3.5rem;}
#tourist_list>li>div>h2[peer_id^="t"]:after{content:"(临时)";color:red}
/*.check_inpt{
	position: absolute;
	height:1.5rem!important;
	width:1.5rem!important;
	display: inline-block!important;
	padding: 0!important;
	margin: 0!important;
}*/
/*.inpt_box{
	height:2rem;
	width:2rem!important;
	padding: 0!important;
	margin: 0!important;
	float: left;
	margin-top:1.5rem!important;
}*/
</style>
</head>
<body>
<div class="containter">
	<div id="toast"></div>
  <header data-am-widget="header" class="am-header am-header-default">
    <div class="am-header-left am-header-nav">
        <a href="javascript:;"onClick="javascript :history.back(-1);">
          <img src="assets/images/left.png">
        </a>
    </div>
    <h1 class="am-header-title" style="margin:0 14%">
      选择游客
    </h1>
    <div class="am-header-right am-header-nav">
      
        <button id="add1">确定</button>
     
    </div>
  </header>
  <div style="height: 4rem; width: 100%;"></div>
  <div class="invoice">
     <h3>已选择<span id="before1">0</span>/<span id="after1">0</span>位游客</h3>
     <ul id="tourist_list">
     <!--<li>
        <label class="am-checkbox">
          <input type="checkbox" value="" data-am-ucheck>
        </label>
        <div>
          <h2>王五</h2>
          <p>身份证：15633547845</p>
        </div>
        <a href="change_message.html"><img src="assets/images/a18.png"></a>
      </li>-->
     <!-- <li>
        <label class="am-checkbox">
          <input type="checkbox" value="" data-am-ucheck>
        </label>
        <div>
          <h2>王五</h2>
          <p>身份证：15633547845</p>
        </div>
        <a href="change_message.html"><img src="assets/images/a18.png"></a>
      </li>
      <li>
        <label class="am-checkbox">
          <input type="checkbox" value="" data-am-ucheck >
        </label>
        <div>
          <h2>李四</h2>
          <p>台湾通行证：15633547845</p>
        </div>
        <a href="change_message.html"><img src="assets/images/a18.png"></a>
      </li>
      <li>
        <label class="am-checkbox">
          <input type="checkbox" value="" data-am-ucheck >
        </label>
        <div>
          <h2>张三</h2>
          <p>其他：15633547845</p>
        </div>
        <a href="change_message.html"><img src="assets/images/a18.png"></a>
      </li>-->
    </ul>
    <!-- <div class="div">
      <img src="assets/images/xiao.png" alt="">
      <p>您还没有添加任何游客</p>
    </div> -->
    <button type="button" class="add_tourist"><img src="assets/images/+.png" alt="">添加游客</button>
  </div>
  
</div>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/amazeui.min.js"></script>
<script src="assets/js/allUse.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		if(JSON.parse(decodeURIComponent(sessionStorage.getItem("form_option_date")))){
				var option_data_arr=JSON.parse(decodeURIComponent(sessionStorage.getItem("form_option_date")));
				$("#after1").html(option_data_arr.total_num)
		}	
		var dePartDay=GetQueryString("dePartDay");//出发日期
		var stock=GetQueryString("stock");//库存
		var total_num=GetQueryString("total_num");//出行人数
		var adult_price=GetQueryString("adult_price");
		var child_price=GetQueryString("child_price");
		var adult_num=GetQueryString("adult_num");
		var child_num=GetQueryString("child_num");
		var line_id=GetQueryString("lin_id");
		var title_name=GetQueryString("title_name");
		var total_price=GetQueryString("total_price");
		var arr1=[];
		
		if(sessionStorage.getItem('customer_list')){
			 arr1=JSON.parse(sessionStorage.getItem('customer_list'));
			$("#before1").html(arr1.length)
		}
		$.ajax({
			type:"get",
			url:url_enter+"/api/get_my_peer_list",
			headers:headers,
			success:function(data){
				if(data.result!=1){
					localStorage.removeItem('token');
					sessionStorage.removeItem('token');
					window.location.href='login.html'
				}
				console.log(data)//<input class="check_inpt" type="checkbox" value=""/>
				if(sessionStorage.getItem('req')){
					//console.log(data.data.peer_list.concat(JSON.parse(sessionStorage.getItem('req'))));
					data.data.peer_list=data.data.peer_list.concat(JSON.parse(sessionStorage.getItem('req')))
				}
				if(data.data.peer_list){
					for(var i=0;i<data.data.peer_list.length;i++){
						$(".invoice #tourist_list").append('<li><a class="jump_change" href="javascript:void(0)" peer_id="'+data.data.peer_list[i].peer_id+'"><img src="assets/images/a18.png"></a><div><h2 peer_id="'+data.data.peer_list[i].peer_id+'">姓名：'+data.data.peer_list[i].real_name+'</h2><p>手机号：<span>'+data.data.peer_list[i].phone_num+'</span></p></div><label class="am-checkbox"><input class="am-ucheck-checkbox check_inpt" peer_id="'+data.data.peer_list[i].peer_id+'" type="checkbox" value="" data-am-ucheck><span class="am-ucheck-icons"><i class="am-icon-unchecked"></i><i class="am-icon-checked"></i></span></label></li>');
					};
					
					for(var k=0;k<arr1.length;k++){
						for(var i=0;i<$(".invoice #tourist_list li").length;i++){
							if(arr1[k].peer_id==$(".invoice #tourist_list li").eq(i).find($(".check_inpt")).attr("peer_id")){
								$(".invoice #tourist_list li").eq(i).find($(".check_inpt")).attr("checked","checked")
							}
						};
					}
				}
//				for(var j=0;j<$(".change_message").length;j++){
//					$(".change_message").eq(i).click(function(){
//						console.log(i)
//						var peer_id=$("#tourist_list li").eq(i).attr("peer_id");
//						console.log(peer_id)
//						sessionStorage.setItem("form_tourist_id",encodeURIComponent(peer_id))
//					})
//				}
				$(".jump_change").click(function(){
					if(($(this).attr('peer_id').indexOf('t'))!=-1){
						window.location.href="change_message.html?peer_id="+$(this).attr('peer_id');
					}else{
						var peer_id= $(this).attr("peer_id");
						sessionStorage.setItem("form_peer_id",peer_id);
						window.location.href="change_message.html"
					}
					
					
				});
				$(".check_inpt").change(function(){
					var select_num=$("input:checked").length
					$("#before1").html(select_num)
				});
				$(".add_tourist").click(function(){
					window.location.href="change_message.html?from=tourist"
				});
				$("#add1").click(function(){
					console.log(data.data);
					var arr=[];
					for(var i=0;i<$("#tourist_list li").length;i++){
						if($(".check_inpt").eq(i).is(":checked")){
							console.log($("#tourist_list li ").eq(i).find($("div p span")).html())
							arr.push({"add_customer":""
							+$("#tourist_list li").eq(i).find($("h2")).html()+"","phone_num":""
							+$("#tourist_list li ").eq(i).find($("div p span")).html()+"","peer_id":""+$("#tourist_list li").eq(i).find($("div h2")).attr("peer_id")+"",
							"card_type":""+data.data.peer_list[i].card_type+"","card_no":""+data.data.peer_list[i].card_no
							+"","gender":""+data.data.peer_list[i].gender+"","birthday":""+data.data.peer_list[i].birthday
							})
						}
					};
					i=null;
					//去掉，号
			//		arr=arr.substring(2)
					if(parseInt($("#before1").html())<parseInt($("#after1").html())){
						showToast("游客数量不够哦")
						return;
					}else if(parseInt($("#before1").html())>parseInt($("#after1").html())){
						showToast("选择的游客太多啦")
						return;
					}
					sessionStorage.setItem('customer_list',JSON.stringify(arr));
					sessionStorage.setItem('tourist_url',window.location.href);
			//		console.log(JSON.parse(localStorage.getItem('customer_list')))
					window.location.href="information.html"
						
				});
				
			
			}
		});

	})
</script>

</body>
</html>